// pages/goods_detail/goods_detail.js
import { http } from '../../utils/request'
import { showToast } from '../../utils/show_toast'

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/index'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    goods_info: {},
    bottom_bar: [
      { title: '客服', icon: 'service-o', type: 'service' },
      { title: '店铺', icon: 'goods-collect-o', type: 'shop' },
      { title: '购物车', icon: 'cart-o', type: 'cart', info: 0 },
      { title: '加入购物车', icon: '', className: 'bar-item-cart', type: 'add' },
      { title: '立即购买', icon: '', className: 'bar-item-buy', type: 'buy' }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 商品id
    const goods_id = options.goods_id
    // 获取商品详情
    this.getGoodsDetail(goods_id)
    // 使用mobx
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['cart', 'cartCount'],
      actions: ['addToCart']
    })
    // 为了提升性能，store中的字段被更新后不会立刻同步更新到this.data中，而是等到下一个nextTick调用时才更新（从而显著减少setData的调用次数）
    // 如果需要立刻调用 可以使用：this.updateStorebindings() // behavior中  | this.storeBindings.updateStoreBindings()页面中
    wx.nextTick(() => {
      // console.log(this.data, this.data.cart, this.data.cartCount)
      this.setData({
        'bottom_bar[2].info': this.data.cartCount
      })
    })
    
  },

  // 获取商品详情
  async getGoodsDetail(goods_id) {
    const { data: result } = await http.get('/goods/detail', { goods_id })
    if(result.meta.status !== 200) return showToast()
    // 第一个replcae：为img标签添加行内style样式，解决图片底部空白间隙；第二个replace替换图片后缀名
    result.message.goods_introduce = result.message.goods_introduce.replace(/<img /g, '<img style="display: block;" ').replace(/webp/g, 'jpg')
    this.setData({
      goods_info: result.message
    })
    // console.log(result.message)
  },
  // 查看轮播图大图
  preview(e) {
    wx.previewImage({
      current: e.currentTarget.dataset.index,
      urls: this.data.goods_info.pics.map(x => x.pics_big)
    })
  },
  // 点击底部操作栏
  bottomBarTap(e) {
    const type = e.currentTarget.dataset.type
    if (type === 'add') {
      // 组装goods数据
      const goods = {
        goods_id: this.data.goods_info.goods_id,
        goods_name: this.data.goods_info.goods_name,
        goods_price: this.data.goods_info.goods_price,
        goods_count: 1,
        goods_small_logo: this.data.goods_info.goods_small_logo,
        goods_state: true //商品勾选状态
      }
      this.addToCart(goods)
      // 页面内购物车商品数量增加
      this.setData({
        'bottom_bar[2].info': this.data.bottom_bar[2].info + 1
      })
    } else if(type === 'cart') {
      wx.switchTab({
        url: '/pages/cart/cart',
      })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})